<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>websocket chat</title>
</head>

<body>

<div>
    <label>输入信息：</label><input id="id" width="100px" /><br />
    <br /><br />
    <form enctype="multipart/form-data" id="uploadForm">
        <input type="file" name="uploadFile" id="upload_file" style="margin-bottom:10px;">
        <input type="button" id="uploadPicButton" value="上传" onclick="uploadImage()">
    </form>
    <!--<input type="file" onchange="uploadImgTest();" id="uploadImg" name="uploadImg" />
    <button id="uploadImage" onclick="uploadImage();">上传</button>-->
    <img src="http://111.230.252.52/vuetest/images/bbb.jpg"  alt="上海鲜花港 - 郁金香" />
</div>


<div id="test">

</div>

<hr color="blanchedalmond"/>
<div id="voiceDiv">

</div>

</body>

<script src="js/jquery.min.js"></script>

<script>

    function uploadImage(){
        //var uploadUrl = "http://localhost:8860/v1/uploadDownload/uploadImage";
        var uploadUrl = "http://111.230.252.52/vuetest/uploadImage";
        var pic = $('#upload_file')[0].files[0];
        var fd = new FormData();
        //fd.append('uploadFile', pic);
        fd.append('file', pic);
        $.ajax({
            url:uploadUrl,
            type:"post",
            // Form数据
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("the data is : {}",data);
                if(data.code == 0){
                    console.log("上传成功后的文件路径为："+data.data);
                    var img = $("<img />")
                    img.attr("src",downUrl+"?imageName="+data.data);
                    img.width("160px");
                    img.height("160px");
                    $("#imgDiv").append(img);
                }

            }
        });

    }

</script>

</html>